@import '_variables';
@import '_colors';
@import "bootstrap-sprockets";
@import "bootstrap";

@import "font-awesome-sprockets";
@import "font-awesome";

@import '_mixins';

@import '_icons';
@import '_code';
@import '_animations';

@import '_dartvm';
@import '_books';
@import '_os-tabs';

/* -----------------------------------------
  Global
  ----------------------------------------- */
body {
 font-family: $font-family-base;
 font-size: $font-size-base;
}
main {}
section {
 position: relative;
}

h1, h2, h3, h4, h5, h6 {
 font-family: $font-family-base;
 font-weight: 400;
 margin-top: 1.5em;
 color: $gray-dark;
}

h1, .h1 { font-size: $font-size-h1; margin-top: 0; margin-bottom: 0.67em;}
h2, .h2 { font-size: $font-size-h2;}
h3, .h3 { font-size: $font-size-h3;}
h4, .h4 { font-size: $font-size-h4;}
h5, .h5 { font-size: $font-size-h5;}
h6, .h6 { font-size: $font-size-h6;}

p {}

a, button {
 text-decoration: none;
 color: $brand-primary;
 &:visited {
   color: $brand-primary;
 }
 &:hover, &:focus, &:active {
   color: lighten($brand-primary, 25%);
   outline: none;
   text-decoration: none;
 }
 &.external {
  &:after {
    content: $icon-external;
    vertical-align: top;
    margin-left: 2px;
    font-family: 'dart' !important;
    font-size: 11px;
    color: inherit;
    opacity: 0.5;
  }
 }
}

form {
  .muted {
    font-size: 75%;
    color: $gray-light;
    text-indent: 0;
    padding: 10px;
  }
}
.select {
  position: relative;
  cursor: pointer;
  select {
    appearance: none;
    min-width: 120px;
    padding: 0 30px 0 10px;
    &:focus {
     outline: none;
    }
  }
  &:after {
    font-family: 'dart' !important;
    content: $icon-arrow;
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 9px;
    color: $gray-dark;
    transform: rotate(180deg);
    pointer-events: none;
    @include transition();
  }
}
input, select {
  line-height: 32px;
  height: 32px;
  margin: 4px 0;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  background-color: $gray-light;
  color: $gray-dark;
  &:focus, &:active {
    outline-color: #fff;
  }
}

pre {
  padding: $content-padding;
  background-color: $gray-light;
  color: $blue;
  position: relative;
  border: none;
  border-radius: 0;
  &.dartpad {
    // &:after {
    //   content: 'Run';
    //   position: absolute;
    //   top: 10px;
    //   right: 10px;
    //   display: block;
    //   z-index: 10;
    //   background-color: $white-base;
    //   background-image: url('{% asset_path "shared/dart/logo/default.svg" %}');
    //   background-size: 18px;
    //   background-position: 7px center;
    //   background-repeat: no-repeat;
    //   padding: 5px 10px 5px 30px;
    //   border-radius: 8px;
    //   font-family: $font-family-base;
    // }
  }
  .highlight {
    background: #fffde7;
    padding: 2px;
  }
}
code {
  background-color: transparent;
  padding: 0;
  color: darken($brand-primary, 20%);
}
img {
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------
  DOM
  ----------------------------------------- */

// Structure

#page-header {
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  background-color: $gray-light;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  z-index: 1030;
}
#page-content {
  position: relative;
  margin-top: 50px;
  padding: 20px;
  min-height: calc(100vh);
  > article {
    width: calc(100vw - 525px);
    margin-left: 250px;
  }
}
#page-footer {
  position: relative;
  color: $white-base;
  font-weight: 300;
  background-color: $brand-primary;
  z-index: 5;
  .brand {
    width: 120px;
  }
  small {
    display: block;
    padding-right: 25px;
  }
  h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: inherit;
    a {
      color: $white-base;
      &:hover, &:focus, &:active {
        color: $gray-lighter;
      }
    }
  }
  ul {
    list-style: none;
    padding: 0;
    li {
      a {
        color: #ffffff;
        line-height: 16px;
        &:hover, &:focus, &:active {
          color: $gray-lighter;
        }
      }
    }
  }
}

// Banner
.banner {
  background-color: $blue-light;
  text-align: center;
  padding: .5em 0;
  margin-bottom: 40px;
}

.banner__text {
  font-weight: 300;
  margin-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
}

.banner__frontpage-row {
  .content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .banner {
    margin-bottom: 0;
  }
}

// Navigation
#menu-toggle {
  display: none;
  line-height: 50px;
  margin-left: 20px;
  padding-right: 10px;
  font-size: 16px;
  cursor: pointer;
  z-index: 9999;
}
#mainnav {
  display: flex;
  color: $gray-base;
  ul {
    margin: auto;
    margin-right: 0;
    padding: 0;
    list-style: none;
    &:not(.dropdown-menu) {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
    }
    li {
      padding: 0 15px;
      a {
        display: inline-block;
        padding: 0;
        font-size: 16px;
        line-height: 50px;
        color: $gray-dark;
        &:hover {
          color: $brand-primary;
        }
      }
      &.active {
        a {
          color: darken($gray-light, 15%);
          cursor: default;
          &:hover {
            color: darken($gray-light, 15%);
          }
        }
      }
      &.searchfield {
        line-height: 50px;
        button {
          position: absolute;
          top: 1px;
          right: 16px;
          line-height: 50px;
          height: 50px;
          padding: 0;
          border: none;
          background: transparent;
          i {
            display: block;
            height: 32px;
            width: 40px;
            line-height: 32px;
            margin-top: 2px;
            font-size: 24px;
            background-color: transparent;
            color: $gray-light;
          }
        }
        &.active {
          button {
            i {
              background-color: $gray-dark;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .dropdown-menu {
    background-color: $gray-light;
    border-top-color: transparent;
    color: $gray-base;
    a:hover, a:focus { background-color: transparent; }
    a.active:after {
      font-family: 'Font Awesome 5 Free';
      content: '\f00c'; // fas fa-check
      font-weight: 900;
      padding-left: .5em;
      // color: $brand-secondary;
    }
  }
  .brand {
    display: block;
    float: left;
    width: 85px;
    margin: 0 20px;
    overflow: hidden;
    line-height: 50px;
  }
}
#subnav {
  height: 32px;
  line-height: 32px;
  margin-bottom: 10px;
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
      width: 49%;
      a {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
      }
      &.next {
        float: right;
        text-align: right;
      }
    }
  }
}
#footernav {}

#sidenav {
  position: relative;
  width: 230px;
  margin-right: 20px;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
  .content {
    h4 {
      margin-top: 0;
      font-size: 18px;
      font-weight: normal;
      text-transform: uppercase;
      a {
        color: $gray-dark;
        &:hover, &:focus, &:active {
          color: $gray-dark;
        }
      }
    }
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      li {
        position: relative;
        margin-top: 10px;
        line-height: 110%;
        a:visited {
          color: $brand-primary;
        }
        i {
          display: inline-block;
          margin-left: 4px;
          font-size: 10px;
          cursor: pointer;
          transform-origin: center;
          @include transition();
          &:hover {
            transform: rotate(90deg);
          }
        }
        ul {
          display: none;
          height: 0;
          opacity: 0;
          @include transition(0.5s);
          li {
            padding-left: 15px;
            a {
              font-weight: 300;
            }
          }
        }
        &.active {
          > a {
            color: $gray-dark;
            font-weight: bold;
          }
          i {
            cursor: pointer;
            transform: rotate(-90deg);
          }
          > ul {
            display: block;
            height: auto;
            opacity: 1;
          }
        }
      }
    }
    & > ul {
      margin-bottom: 25px;
    }
  }
  .brand {
    display: none;
    border-bottom: 1px solid $gray-light;
    margin-top: -5px;
    margin-bottom: 20px;
    img {
      width: 100px;
      margin-bottom: 10px;
    }
  }
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.26);
  }
}
#toc {
  position: fixed;
  width: 225px;
  right: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 999;
  .content {
    padding: 0;
    padding-top: 30px;
  }
  $border-width: 3px;
  .section-nav {
    opacity: 0;
    /* Add a bit of extra space between top-level entries */
    & > li { padding-top: 3px; }
  }
  /* Nested toc entries: */
  .toc-entry ul li {
    font-size: 0.9em;
    $padding: $font-size-base * .75;
    padding-left: $padding;
    /* Prevent the active entry from shifting right because of double border */
    &.active { padding-left: $padding - $border-width; }
  }
  h4 {
    // TODO: use mixin and share code with #sidenav .content h4
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    border-left: 3px solid $gray-lighter;
    padding: 3px 15px;
    padding-bottom: 10px;
    margin: 0;
  }
  .nav {
    li {
      border-left: $border-width solid $gray-lighter;
      a {
        padding: 3px 15px;
        color: $brand-primary;
      }
      &.active {
        border-left: $border-width solid $gray-dark;
        a {
          color: $gray-dark;
        }
      }
    }
  }
  /* Don't show a double border for nested inactive entries */
  li li { border-left: none; }
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.26);
  }
}

#site-search-results {
  display: none;
  position: relative;
  margin-top: 70px;
  padding: 20px;
  min-height: calc(100vh);
  button {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 999;
    &:hover {
      color: $gray;
    }
  }
}


/* -----------------------------------------
 Dartpad
 ----------------------------------------- */

#run-dartpad {
  position: relative;
  padding: 15px 0;
  background: $gray-light;
  border-top: 1px solid $gray;
  z-index: 5;
}

/* -----------------------------------------
 Search
 ----------------------------------------- */
#q {
  position: relative;
  width: 225px;
  background-color: #ffffff;
}

input.gsc-search-button {
  @extend .btn;
  @extend .btn-primary;
}

#search-icon {
  position: absolute;
  right: 5px;
  top: 0;
  color: $gray-dark;
  font-size: 14px;
}

/* -----------------------------------------
 Table of Contents
 ----------------------------------------- */
 .toc-entry.toc-h2,
 .toc-entry.toc-h3 {}
.toc-entry.toc-h1,
.toc-entry.toc-h4,
.toc-entry.toc-h5,
.toc-entry.toc-h6,
.no_toc {
 display: none;
}

/* -----------------------------------------
 Anchor links
 ----------------------------------------- */
$icon-size: 24px;
$anchor-padding: 4px;

// Push # link targets clear of page header.
@mixin header-clearance {
  margin-top: -60px;
  padding-top: 60px;
}

main .content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    .anchor {
      @include header-clearance;

      box-sizing: border-box;
      float: left;
      margin-left: -($icon-size + $anchor-padding);
      max-width: $icon-size;
      overflow: hidden;
      padding-right: $anchor-padding;

      .octicon-link {
        @include transition(.1s);

        background-image: url('{% asset_path "ic_link_black_24px.svg" %}');
        display: block;
        height: $icon-size;
        opacity: 0;
        width: $icon-size;
      }
    }

    &:hover {
      .anchor .octicon-link {
        opacity: 1
      }
    }

    // Invisible pre-element to avoid modifying styles on headings.
    &[id]::before {
      @include header-clearance;

      content: "";
      display: block;
    }
  }
}

/* -----------------------------------------
  Utility Classes
 ----------------------------------------- */

.content {
  position: relative;
  padding: $content-padding;
}

.button {
  padding: 5px 10px;
  color: $blue;
  border-radius: 8px;
}

.codesample__open-in-dartpad {
  display: block;
  position: absolute;
  width: auto;
  z-index: 10;
  padding: 5px 10px 5px 35px;
  top: 35px;
  right: 38px;
  background-color: $gray;
  color: $gray-base;

  font-weight: normal;
  font-size: $font-size-base * 0.8;
  @media (min-width: $screen-sm-min) {
    font-size: $font-size-base * 0.7;
  }
  @media (min-width: $screen-md-min) {
    font-size: $font-size-base * 0.8;
  }

  &.top {
    top: 0;
  }
  &:visited, &:active {
    color: $gray-base;
  }
  &:hover {
    background-color: darken($gray, 10%);
    color: $white-base;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 10px;
    width: 18px;
    height: 18px;
    background-image: url('{% asset_path "shared/dart/logo/default.svg" %}');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

// Columns
.col2 {
  list-style: none;
  column-count: 2;
  column-gap: 0;
  padding-left: $font-size-base / 2;
  li {
    page-break-inside: avoid;
    padding: $font-size-base / 2;
    font-size: smaller;
  }
}
.col3 {
  list-style: none;
  column-count: 3;
  column-gap: 0;
  li {
   page-break-inside: avoid;
  }
}

.break-50 {
  width: 50% !important;
}
.break-60 {
  width: 60% !important;
}
.break-70 {
  width: 70% !important;
}
.break-80 {
  width: 80% !important;
}
.break-90 {
  width: 90% !important;
}

.card-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}

.card {
  display: block;
  position: relative;
  width: 300px;
  height: auto;
  min-height: 100px;
  padding: $content-padding;
  margin: 15px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: $gray-light;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
  text-align: center;
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
  }
  &.narrow { width: 250px; }
}

// Support for .card-grid formatted as a markdown unordered list
ul.card-grid { padding-left: 0; }

// Platform logos
li.card {
  background-color: transparent;
  box-shadow: none;
  .logo {
    display: block;
    padding-bottom: $font-size-base;
  }
}

// Color Palette
.slogan {
  background-color: $brand-primary;
  text-align: center;
  h1, h2, h3 {
    margin: 0;
  }
}
.gray-dark {
 background-color: $gray-dark;
 color: $white-base;
 h1, h2, h3, h4, h5, h6 {
   color: $white-base;
 }
}
.gray-light {
 background-color: $gray-light;
 color: $gray-dark;
 h1, h2, h3, h4, h5, h6 {
   color: $gray-dark;
 }
}

@mixin dart-style-for($kind, $bg-color, $msg) {
  .#{$kind} {
    background-color: $bg-color;
    &:after {
      font-family: $font-family-base;
      content: $msg;
      position: absolute;
      top: 0;
      right: $font-size-base / 4;
      color: darken($bg-color, 25%);
    }
  }
}

// TODO: reclaim and use the class names good and bad (rather than good-style and bad-style):
@include dart-style-for(good-style, $alert-success-bg, 'good');
@include dart-style-for(bad-style, $alert-danger-bg, 'bad');

@include dart-style-for(passes-sa, $alert-success-bg, '\2714  static analysis: success');
@include dart-style-for(fails-sa, $alert-danger-bg, '\2717  static analysis: error/warning');

@include dart-style-for(runtime-success, $alert-success-bg, '\2714  runtime: success');
@include dart-style-for(runtime-fail, $alert-danger-bg, '\2717  runtime: error');

// Deprecated, use good-style
.good {
  position: relative;
  padding:10px;
  margin-bottom: 11px;
  @extend .alert-success;
  &:after {
    content: 'good';
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    color: darken($alert-success-bg, 25%);
  }
  pre {
    margin-bottom: 0;
    background-color: transparent;
  }
}

// Deprecated, use bad-style
.bad {
  position: relative;
  padding:10px;
  margin-bottom: 11px;
  @extend .alert-danger;
  &:after {
    content: 'bad';
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    color: darken($alert-danger-bg, 25%);
  }
  pre {
    margin-bottom: 0;
    background-color: transparent;
  }
}

.muted {
  color: $gray;
}

.footnote {
  margin: 0;
  padding: 0;
  list-style-type: none;
  li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    position: relative;
    &:before {
      content: counter(step-counter);
      position: absolute;
      left: -25px;
      top: -3px;
      font-size: 20px;
      font-weight: bold;
      padding: 3px 8px;
    }
  }
}

.code-notes {
  list-style-type: none;
  padding-left: 0;
  display: table;
  li {
    counter-increment: code-note-counter;
    display: table-row;
    padding-left: 8px;
    &:before {
      font-family: $font-family-monospace;
      content: '/*' counter(code-note-counter) '*/' ;
      display: table-cell;
      text-align: right;
      color: $teal;
      padding-right: $font-size-base / 2;
      // background-color: lightyellow;
    }
  }
}

/* -----------------------------------------
  Bootstrap Overwrites
 ----------------------------------------- */
.container {
 position: relative;
 max-width: 100%;
 width: $live-content-width;
 margin: 0 auto;
}
.page-header {
  margin: 0;
  margin-bottom: 10px;
  padding: $content-padding;
  border-bottom: 1px solid $gray;
  h1, h2 {
    font-size: 36px;
  }
}

// TODO: replace usage of .panel with .mini-toc

.mini-toc {
  @extend .alert;
  background-color: $gray-light;
}

.panel {
  background-color: $gray-light;
  padding: $content-padding;
  margin-bottom: 20px;
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: 5px;
  }
  ul {
    padding-left: 15px;
  }
}

.table {
  width: 100%;
  @extend .table-striped;
  @extend .table-bordered;
}

.popover {
  border-radius: 0;
  .popover-title {
    border-radius: 0;
  }
}

.alert {
  padding: $content-padding;
  border: none;
  pre, code {
    background-color: transparent;
  }
  p {
    margin-bottom: 0;
  }
  &.alert-success {
    width: auto;
    background-color: $alert-success-bg;
  }
  &.alert-info {
    width: auto;
    background-color: $alert-info-bg;
  }
  &.alert-warning {
    width: auto;
    background-color: $alert-warning-bg;
  }
  &.alert-danger {
    width: auto;
    background-color: $alert-danger-bg;
  }
  &.alert-obsolete {
    width: auto;
    background-color: $gray-dark;
    color: $white-base;
  }
}

.alert-with-image {
  display: table-row;
  > img {
    margin-right: $content-padding * 2;
    width: $font-size-base * 3;
    @media(max-width: $screen-xs-min) { display: none; }
  }
  > div {
    display: table-cell;
    @media(min-width: $screen-xs-min) { padding-left: $content-padding; }
    vertical-align: top;
  }
}

/* Used for inlined icon markers, usually at the start of a paragraph */
.content > p > i.material-icons {
  vertical-align: bottom;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  font-size: small;
  > .active {
    color: inherit;
  }
  > li {
    + li {
      &:before {
        font-family: 'Material Icons';
        content: 'chevron_right';
        vertical-align: bottom;
      }
    }
  }
}

ul.nav-list {
  list-style: none;
  padding: 0;
  li {
    border-bottom: 1px solid $gray-light;
    h2 {
      font-weight: 400;
      font-size: 20px;
      margin-bottom: 0;
    }
  }
}

ul.page-github-links-menu {
  $margin: $font-size-base / 2;
  padding: 0;
  float: right;
  margin-top: $margin;
  margin-bottom: $margin;
  li {
    display: inline;
    padding-left: $margin;
    &:first-child {
      padding-left: 0;
    }
  }
  a {
    font-size: $font-size-base * 1.2;
  }
}

/* -----------------------------------------
  Templates
 ----------------------------------------- */
// Homepage

body.homepage {
  #sidenav {
    display: none;
  }
  #page-content {
    padding: 0;
    padding-bottom: 60px;
  }
  #code-sample-section {
    padding-top: 30px;
    h3 { margin-top: 0; }
  }
  section {
    padding: 0;
  }
  pre.prettyprint {
   margin-top: 0;
   height: 200px;
   overflow: auto;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
  }
  .card-grid {
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

// Error Page
body.error {
  #sidenav {
    display: none;
  }
}

// Page States
body.hide_toc {
  #page-content {
    > article {
      width: calc(100vw - 300px);
    }
  }
  #toc {
    display: none;
    right: -250px;
  }
}
body.fixed_nav {
  #sidenav {
    top: 40px;
    position: fixed;
    left: 20px;
  }
}

body.obsolete {
  #page-header {
    .alert {
      position: relative;
      top: 5px;
      margin: 0;
    }
  }
  #page-content {
    margin-top: 120px;
    border: 10px solid $alert-danger-bg;
  }
}
/* -----------------------------------------
  Media Queries
 ----------------------------------------- */

@media(max-width: 1200px) {
  #toc {
    display: none;
  }
  #page-content {
    > article {
      width: calc(100vw - 270px);
    }
  }
}

@media(max-width: 1024px) {

  #menu-toggle {
    display: inline-block;
  }
  #page-content {
    > article {
      width: calc(100vw - 40px);
      margin: 0 auto;
    }
  }

  #sidenav {
    position: fixed;
    top: 0;
    left: -300px;
    width: calc(100vw - 64px);
    max-width: 290px;
    height: 100%;
    max-height: none !important;
    background: #fff;
    z-index: 9999;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    @include transition(left, .5s);
    .brand {
      display: block;
    }
  }

  body.hide_toc {
    #page-content {
      > article {
        width: 100%;
      }
    }
  }
  body.fixed_nav {
    #sidenav {
      left: -300px;
      top: 0;
    }
  }
  body.open_menu {
    &:before {
      content: '';
      display: block;
      position: fixed;
      top: 0; bottom: 0;
      left: 0; right: 0;
      height: 100%;
      z-index: 999;
      background-color: rgba($gray-base,0.5);
      cursor: pointer;
      pointer-events: none;
      @include transition(0.5s);
    }
    #sidenav {
      display: block;
      left: 0 !important;
    }
  }
}

@media(max-width: 960px) {
  #mainnav {
    ul {
      li {
        display: none;
        &.searchfield {
          display: block;
        }
      }
    }
  }
}

@media(max-width: 600px) {
  .card {
    width: 100%;
  }
  .break-50,
  .break-60,
  .break-70,
  .break-80,
  .break-90, {
    width: 100% !important;
  }
}

@media(max-width: 479px) {
  #menu-toggle {
    position: absolute;
    right: 10px;
    top: 0px;
  }
  #mainnav {
    ul {
      li {
        &.searchfield {
          display: none;
        }
      }
    }
  }
}

@import '_overwrites';
